<template>
  <IFexHeaderMain>
    <template #header>
      <IHeader :bankUrl="bankUrl">网点详情</IHeader>
    </template>

    <view class="page-container wh_auto">
      <!-- 网点数据概览卡片 -->
      <view class="stats-card">
        <text class="card-title">{{ detail.name }}</text>
        <view class="stats-list">
          <view class="stat-item">
            <view class="stat-text">
              <text class="label">设备数量</text>
              <text class="value">{{ detail.dcSize }}</text>
            </view>
          </view>
          <view class="stat-item">
            <view class="stat-text">
              <text class="label">订单</text>
              <text class="value">{{ detail.usSize }}</text>
            </view>
          </view>
          <view class="stat-item">
            <view class="stat-text">
              <text class="label">柜门数量</text>
              <text class="value">{{ detail.caSize }}</text>
            </view>
          </view>
          <view class="stat-item">
            <!-- <uni-icons type="money" size="20" color="#fff"></uni-icons> -->
            <view class="stat-text">
              <text class="label">收益</text>
              <text class="value">{{ detail.usJrSize }}</text>
            </view>
          </view>
        </view>
      </view>

      <!-- 功能入口列表 -->
      <view class="function-list">
        <view class="function-item" @click="handleCountFun()">
          <view class="icon blue-icon">
            <uni-icons type="info" size="20" color="#fff"></uni-icons>
          </view>
          <view class="text">
            <text class="title">网点详情</text>
            <text class="desc">查看网点详细信息</text>
          </view>
          <text class="arrow">→</text>
        </view>
        <view class="function-item" @click="handleDeviceFun()">
          <view class="icon green-icon">
            <uni-icons type="settings" size="20" color="#fff"></uni-icons>
          </view>
          <view class="text">
            <text class="title">设备管理</text>
            <text class="desc">查看设备详细信息</text>
          </view>
          <text class="arrow">→</text>
        </view>
        <!-- <view class="function-item" @click="handleGoTo('导航前往')">
          <view class="icon orange-icon">
            <uni-icons type="location" size="20" color="#fff"></uni-icons>
          </view>
          <view class="text">
            <text class="title">导航前往</text>
            <text class="desc">看看驾校离您有多远吧</text>
          </view>
          <text class="arrow">→</text>
        </view> -->
      </view>
    </view>
  </IFexHeaderMain>
</template>

<script setup lang="ts" name="SiteDetail">
  import { computed, nextTick, onMounted, ref } from 'vue'
  import IFexHeaderMain from '@/components/container/IFexHeaderMain.vue'
  import IHeader from '@/components/container/IHeader.vue'
  import { onLoad, onShow } from '@dcloudio/uni-app'
  import uniIcons from '@dcloudio/uni-ui/lib/uni-icons/uni-icons.vue'
  import { useNavigatePage } from '@/hooks/navigateTo'
  import { getNetworkPointDetails } from '@/api/zmanager/outlets'
  import useToastMsg from '@/hooks/sysMsg'
  import useUserInfoStore from '@/store/userInfo'
  const userInfoStore = useUserInfoStore()
  const bankUrl = computed(() => (userInfoStore.getPlatformType == 'gld' ? '/pages/zmanager/index/index' : '/pages/invest/index/index'))
  const navigatePage = useNavigatePage()
  const toastMsg = useToastMsg()
  const detail = ref<any>({ id: '', name: '' })
  onLoad((options: any) => {
    detail.value.id = options.id
    detail.value.name = options.name
  })

  onMounted(() => nextTick(() => init()))
  const init = async () => {
    toastMsg.showLoading()
    const result = await getNetworkPointDetails(detail.value.id)
    if (result) {
      detail.value = {
        id: detail.value.id,
        name: detail.value.name,
        ...result.data,
      }
    }
    toastMsg.hideLoading()
  }
  const handleCountFun = () => {
    navigatePage.navigateTo('/pages/zmanager/count/index?id=' + detail.value.id)
  }
  const handleDeviceFun = () => {
    navigatePage.navigateTo('/pages/zmanager/device/index?id=' + detail.value.id)
  }
</script>

<style scoped lang="scss">
  /* 微信小程序适配样式 */
  .page-container {
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 24px;
    background-color: #f5f5f5; /* 小程序常见背景色 */
  }

  .stats-card {
    background: linear-gradient(120deg, #2b8cfb, #4896ff);
    color: #fff;
    padding: 20px;
    border-radius: 12px; /* 小程序常用更大圆角 */
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  }

  .card-title {
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 16px;
    display: block;
  }

  .stats-list {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 16px;
  }

  .stat-item {
    width: calc(50% - 8px);
    display: flex;
    align-items: center;
    gap: 10px;
  }

  /* 关键：实现标签和数值同行展示 */
  .stat-text {
    display: flex;
    align-items: center; /* 垂直居中对齐 */
    gap: 8px; /* 标签和数值之间的间距 */
    white-space: nowrap; /* 禁止换行 */
  }

  .label {
    font-size: 14px;
    opacity: 0.9;
  }

  .value {
    font-size: 16px;
    font-weight: 500;
  }

  .function-list {
    display: flex;
    flex-direction: column;
    gap: 10px; /* 小程序常用更紧凑的间距 */
  }

  .function-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px;
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
    cursor: pointer;
  }

  .icon {
    width: 44px;
    height: 44px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .blue-icon {
    background-color: #409eff;
  }

  .green-icon {
    background-color: #67c23a;
  }

  .orange-icon {
    background-color: #f9ae3d;
  }

  .text {
    display: flex;
    flex-direction: column;
    gap: 4px;
  }

  .title {
    font-size: 16px;
    font-weight: 500;
    color: #333;
  }

  .desc {
    font-size: 13px;
    color: #999;
  }

  .arrow {
    margin-left: auto;
    color: #ccc;
    font-size: 18px;
  }
</style>
